<!--  -->
<script setup>
defineEmits(['onSwitchOrder'])
defineProps(['tabs', 'active'])

</script>

<template>
  <div class="tab-container">
    <RouterLink :to="v.path" class="tab-item" v-for="v in tabs" :class="{ 'active-order': active === v.id }"
      @click="$emit('onSwitchOrder', v)" :key="v.id"> {{ v.title }}
    </RouterLink>
  </div>
</template>

<style scoped lang="scss">
.tab-container {
  margin: 2em 0;
  display: flex;
  align-items: center;
  border-right: 0;
  gap: 10px;

  .tab-item {
    padding: 4px 6px;
    border-radius: 2px;
    cursor: pointer;

    &:hover {
      background-color: rgb(210, 225, 213);
    }
  }
}

.active-order {
  background-color: rgb(210, 225, 213);
}
</style>
